<div class="reverseRotate">
  <div class="rotate">
    <div class="content">正负旋转相消3D动画</div>
  </div>
</div>

<!-- <div class="reverseRotate single">正负旋转相消3D动画</div> 
<div class="rotate single">正负旋转相消3D动画</div>  -->

<style>
  body,
  html {
    overflow: hidden;
  }

  div {
    transform-style: preserve-3d;
    perspective: 500px;
  }

  .reverseRotate {
    margin: 20vh auto;
  }

  .rotate,
  .reverseRotate {
    width: 50vh;
    height: 50vh;
  }

  .content {
    width: 100%;
    height: 100%;
    line-height: 50vh;
    text-align: center;
    background-color: rgba(255, 100, 100, .8);
    font-size: 5vh;
    color: #fff;
    box-shadow: 0px 0px 8px 2px rgba(100, 100, 100, .6);
  }

  .rotate {
    animation: rotate 5s linear infinite;
  }

  .reverseRotate {
    animation: reverseRotate 5s linear infinite;
  }

  @keyframes rotate {
    0% {
      transform: rotateX(0deg) rotateZ(0deg);
    }

    50% {
      transform: rotateX(40deg) rotateZ(180deg);
    }

    100% {
      transform: rotateX(0deg) rotateZ(360deg);
    }
  }

  @keyframes reverseRotate {
    0% {
      transform: rotateZ(0deg);
    }

    100% {
      transform: rotateZ(-360deg);
    }
  }

  /* // .single {
  //     float:left;
  //     line-height: 50vh;
  //     text-align: center;
  //     background-color: rgba(255, 100, 100, .8);
  //     font-size: 5vh;
  //     color: #fff;
  //     margin: 20vh auto;
  //     box-shadow: 0px 0px 8px 2px rgba(100, 100, 100, .6);
  // } */
</style>